<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>bootstrap-table - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="res/css/bootstrap.min.css" rel="stylesheet">
<link href="res/css/materialdesignicons.min.css" rel="stylesheet">
<link href="res/css/animate.css" rel="stylesheet">
<link href="res/css/style.min.css" rel="stylesheet">
<link href="res/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
</head>
  
<body>
	
	<div class="container-fluid p-t-15">
		<div class="col-xs-3">
		  <select class="form-control" id="choicePartition" name="example-select" size="1">
		    <option value="">请选择分区</option>
		    <option value="一分区">一分区</option>
		    <option value="二分区">二分区</option>
		  </select>
		</div>
		<div class="col-xs-3">
		  <select class="form-control" id="choicePrisex" name="example-select" size="1">
		    <option value="">请选择性别</option>
		    <option value="男">男</option>
		    <option value="女">女</option>
		  </select>
		</div>
		<div class="col-xs-3">
		  <select class="form-control" id="choiceCharge" name="example-select" size="1">
		    <option value="">请选择主管人</option>
		    <option value="白少闯">白少闯</option>
		    <option value="白二闯">白二闯</option>
		  </select>
		</div>
		<button class="btn btn-label btn-primary" id="queryOther"><label><i class="mdi mdi-checkbox-marked-circle-outline"></i></label> 查询</button>
	</div>
	
<div class="container-fluid p-t-15">
  
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><h4>囚犯管理</h4></div>
        <div class="card-body">
			
          
          <div id="toolbar" class="toolbar-btn-action">
			  <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">新增犯人</button>
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
            	aria-labelledby="exampleModalLabel">
            	<div class="modal-dialog" role="document">
            		<div class="modal-content">
            			<div class="modal-header">
            				<button type="button" class="close" data-dismiss="modal"
            					aria-label="Close"><span aria-hidden="true">&times;</span></button>
            
            			</div>
            			<!-- 修改信息 -->
            			<div class="card-body">
            				<form action="lyear_forms_elements.html" method="post" onsubmit="return false;">
								<input type="text" hidden="hidden" id="submitType" value="add" />
								<input type="text"  id="id" name="id" hidden="hidden"/>
            					<div class="form-group">
            						<label for="priname">姓名</label>
            						<input class="form-control" type="text" id="priname"
            							name="priname" placeholder="请输入姓名..">
            					</div>
            					<div class="form-group">
            					<label class="lyear-radio radio-inline radio-primary" for="prisex1">
            					  <input type="radio" name="prisex"  id="prisex1" class="prisex" value="男"><span>男</span>
            					</label>
            					<label class="lyear-radio radio-inline radio-primary" for="prisex2">
            					  <input type="radio" name="prisex" id="prisex2" class="prisex" value="女"><span>女</span>
            					</label>
            					</div>
            					<div class="form-group">
            						<label for="priage">年龄</label>
            						<input class="form-control" type="text" id="priage"
            							name="priage" placeholder="请输入年龄..">
            					</div>
            					<div class="form-group">
            						<label for="priaddress">家庭住址</label>
            						<input class="form-control" type="priaddress" id="priaddress"
            							name="priaddress" placeholder="请输入家庭..">
            					</div>
            				<div class="form-group">
            				  <label class="form-group" for="education">学历</label>
            				    <select class="form-control" id="education" name="education" size="1">
            				      <option value="0">请选择</option>
            				      <option value="胎教">胎教</option>
            				      <option value="幼儿园小班">幼儿园小班</option>
            				      <option value="幼儿园大班">幼儿园大班</option>
            					  <option value="小学">小学</option>
            					  <option value="初中">初中</option>
            					  <option value="高中">高中</option>
            					  <option value="大学">大学</option>
            					  <option value="大学以上">大学以上</option>
            				    </select>
            				</div>
            					<div class="form-group">
            						<label for="nation">民族</label>
            						  <select class="form-control" id="nation" name="nation" size="1" ></select>
            					</div>
            					<div class="form-group">
            						<label for="reason">原因</label>
            						<input class="form-control" type="reason" id="reason"
            							name="reason" placeholder="请输入入狱原因..">
            					</div>
									<div class="input-daterange input-group js-datepicker" data-auto-close="false"
										data-date-format="yyyy-mm-dd">
										
										<div class="form-group">
										<label for="starttime">入狱时间</label>
										<input class="form-control" type="text" id="starttime" name="starttime"
											placeholder="入狱时间">
										</div>
										<div class="form-group">
										<label for="endtime">预计出狱时间</label>
										<input class="form-control" type="text" id="endtime" name="endtime"
										placeholder="预计出狱时间">
										</div>
									</div>
            					<div class="form-group">
            						<label for="year">判刑年数</label>
            						<input class="form-control" type="year" id="year"
            							name="starttime" placeholder="请输入判刑年数..">
            					</div>
            					
            					<div class="form-group">
            						<label for="partition">分区</label>
            					  <select class="form-control" id="partition" name="partition" size="1">
            					    <option value="" selected>请选择</option>
            					    <option value="一分区">一分区</option>
            					    <option value="二分区">二分区</option>
            					  </select>
            					</div>
            					<div class="form-group">
            						<label for="charge">主管人</label>
            						<select class="form-control" id="charge" name="charge" size="1">
            						  <option value="" selected>请选择</option>
            						  <option value="白少闯">白少闯</option>
            						</select>
            					</div>
								<div class="form-group">
								  <label class="col-xs-12" for="details">犯罪细节描述</label>
								  <div class="col-xs-12">
								    <textarea class="form-control" id="details" name="details" rows="6" placeholder="内容.."></textarea>
								  </div>
								</div>
								<div class="form-group">
									<button class="btn btn-primary" type="submit" onclick="formSubmit()">确定</button>
								</div>
            				</form>
            			</div>
            			<div class="modal-footer">
            				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            			</div>
            		</div>
            	</div>
            </div>
            <button id="btn_delete" type="button" class="btn btn-danger">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>批量删除
            </button>
          </div>
		  
		  
		  
		  <div class="modal fade" id="showDetail" tabindex="-1" role="dialog"
		  	aria-labelledby="exampleModalLabel">
		  	<div class="modal-dialog" role="document">
		  		<div class="modal-content">
		  			<div class="modal-header">
		  				<button type="button" class="close" data-dismiss="modal"
		  					aria-label="Close"><span aria-hidden="true">&times;</span></button>
		  
		  			</div>
		  			<!-- 查看 -->
		  			<div class="card-body" >
		  				<div class="col-lg-4" style="width:100%;">

		  					<img class="img-circle center-block"
		  						src=""
		  						alt="Generic placeholder image" width="140" height="140" id="PrisonerHeadImg">
		  					<h2 style="text-align: center;" id="PrisonerName">Heading</h2>
		  
		  					<p id="PrisonerDetails">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.
		  						Nullam id
		  						dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac
		  						consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
		  				</div>
		  			</div>

		  			<div class="modal-footer">
		  				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		  			</div>
					
		  		</div>
		  	</div>
		  </div>
		  

          <table id="tb_departments">
		  </table>
 
        </div>
      </div>
    </div>
    
    
    
  </div>
  
</div>

<script type="text/javascript" src="res/js/jquery.min.js"></script>
<script type="text/javascript" src="res/js/bootstrap.min.js"></script>
<script type="text/javascript" src="res/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="res/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="res/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--行内编辑插件-->
<link href="res/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="text/javascript" src="res/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript" src="res/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>

<script type="text/javascript" src="res/js/main.min.js"></script>
			<!--时间选择插件
			-->
		<script src="res/js/bootstrap-datetimepicker/moment.min.js"></script>
		<script src="res/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
		<script src="res/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
		<!--日期选择插件-->
		<script src="res/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
		<script src="res/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
		<script type="text/javascript" src="res/js/main.min.js"></script>
<script type="text/javascript">
$('#tb_departments').bootstrapTable({
    classes: 'table table-bordered table-hover table-striped',
    url: '/Final_ssm2/Prisoner/Pri_table',
    method: 'get',
    dataType : 'json',
    uniqueId: 'id',
    idField: 'id',             // 每行的唯一标识字段
    toolbar: '#toolbar',       // 工具按钮容器
    showColumns: true,         // 是否显示所有的列
    showRefresh: true,         // 是否显示刷新按钮
    contentType: "application/x-www-form-urlencoded",
    //showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
  
    pagination: true,                    // 是否显示分页
    sortOrder: "asc",                    // 排序方式
    queryParams: function(params) {
        var temp = {
			prisex:$('#choicePrisex').val(),
			partition:$('#choicePartition').val(),
			charge:$('#choiceCharge').val(),
            limit: params.limit,         // 每页数据量
            offset: params.offset,       // sql语句起始索引
            page: (params.offset / params.limit) + 1,
            sort: params.sort,           // 排序的列名
            sortOrder: params.order      // 排序方式'asc' 'desc'
        };
        return temp;
    },                                   // 传递参数
    sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
    pageNumber: 1,                       // 初始化加载第一页，默认第一页
    pageSize: 2,                        // 每页的记录行数
    pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
    //search: true,                      // 是否显示表格搜索，此搜索是客户端搜索
    
    //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
    //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
  
    columns: [{
        checkbox: true    // 是否显示复选框
    },{
        field: 'id',
        title: 'ID',
        sortable: true    // 是否排序
    },{
        field: 'priname',
        title: '姓名'
    },{
        field: 'prisex',
        title: '性别',
    },{
        field: 'priage',
        title: '年龄'
    },{
        field: 'priaddress',
        title: '家庭住址',
    },{
        field: 'education',
        title: '学历'
    },{	
        field: 'nation',
        title: '民族',
    },{
        field: 'reason',
        title: '原因'
    },{
        field: 'starttime',
        title: '入狱时间',
    },{
        field: 'year',
        title: '判刑年数',
    },{
        field: 'endtime',
        title: '预计出狱时间',
    },{
        field: 'partition',
        title: '分区',
    },{
        field: 'charge',
        title: '主管人',
    },{
        field: 'operate',
        title: '操作',
        formatter: btnGroup,  // 自定义方法
        events: {
            'click .edit-btn': function (event, value, row, index) {
                editUser(row.id);
            },
            'click .del-btn': function (event, value, row, index) {
                delUser(row.id);
            },
            'click .show-btn': function (event, value, row, index) {
                showUser(row.id);
            }
        }
    }],

    onLoadSuccess: function(data){
        $("[data-toggle='tooltip']").tooltip();
    }
});

// 操作按钮
function btnGroup ()
{
    let html =
        '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default m-r-5 show-btn" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
    return html;
}

// 操作方法 - 编辑
function editUser(id)
{
  $('#id').val(id);
  $('#submitType').attr('value','edit');
  $('#exampleModal').modal('show');
  $.ajax({
    url:'/Final_ssm2/Prisoner/getDetail?id='+id,
    dataType:'json',
    type:'get',
    success(res){
      console.log(res);
      if(res.message==="success"){
		var sex=  res.data.prisex==="男"?0:1;
		console.log(sex);
  		$('#priname').val(res.data.priname);
		$("input[name=prisex]:eq("+sex+")").attr("checked",true);
  		$('#priage').val(res.data.priage);
		$('#priaddress').val(res.data.priaddress);
		$('#reason').val(res.data.reason);
		$('#year').val(res.data.year);
		$('#starttime').val(res.data.starttime);
		$('#endtime').val(res.data.endtime);
		$('#education').val(res.data.education);
		$('#nation').val(res.data.nation);
		$('#partition').val(res.data.partition);
		$('#charge').val(res.data.charge);
      }else if ((res.message==="error")){
        alert('查看失败！');
      }else {
        alert('未知错误！');
      }
    },
    error(){
      alert('系统错误');
    }
  })
}
//添加
function add() {
	$.ajax({
		url:'/Final_ssm2/Prisoner/add',
		dataType:'json',
		type:'get',
		data:{
			priname:$('#priname').val(),
			priage:$('#priage').val(),
			prisex:$('.prisex:radio').val(),
			priaddress:$('#priaddress').val(),
			nation:$('#nation').val(),
			education:$('#education').val(),
			starttime:$('#starttime').val(),
			endtime:$('#endtime').val(),
			partition:$('#partition').val(),
			year:$('#year').val(),
			reason:$('#reason').val(),
			charge:$('#charge').val(),
			details:$('#details').val(),
		},
		success(res){
			console.log(res);
			if(res.message==="success"){
				alert('添加成功！');
				$('#tb_departments').bootstrapTable('refresh');
						$('#priname').val('');
						$('#priage').val('');
						$('.prisex:radio').val('');
						$('#priaddress').val('');
						$('#nation').val('');
						$('#education').val('');
						$('#starttime').val('');
						$('#endtime').val('');
						$('#partition').val('');
						$('#year').val('');
						$('#reason').val('');
						$('#charge').val('');
						$('#details').val('');
			}else if ((res.message==="error")){
				alert('添加失败！');
			}else {
				alert('未知错误！');
			}
		},
		error(){
			alert('系统错误');
		}
	})
}


// 操作方法 - 删除
function delUser(id)
{
	$.ajax({
		url:'/Final_ssm2/Prisoner/delete?id='+id,
		dataType:'json',
		type:'get',
		success(res){
			console.log(res);
			if(res.message==="success"){
				alert('删除成功！');
				$('#tb_departments').bootstrapTable('refresh');
			}else if ((res.message==="error")){
	      alert('查看失败！');
	    }else if ((res.message==="error_permission")){
        alert('无权限！');
		}else {
	     alert('未知错误！');
	    }
		},
		error(){
			alert('系统错误');
		}
	})
}
// 操作方法 - 查看
function showUser(id)
{
	$('#showDetail').modal('show');
	$.ajax({
		url:'/Final_ssm2/Prisoner/queryPrisonerDetail?id='+id,
		dataType:'json',
		type:'get',
		success(res){
			if(res.message==="success"){
				var prisoner = res.data;
				$("#PrisonerHeadImg").attr("src",prisoner.headImage);
				$("#PrisonerName").html(prisoner.priname);
				$("#PrisonerDetails").html(prisoner.details);
			}else if ((res.message==="error")){
	      alert('查看失败！');
	    }else if ((res.message==="error_permission")){
        alert('无权限！');
		}else {
	     alert('未知错误！');
	    }
		},
		error(){
			alert('系统错误');
		}
	})
}

function formSubmit(){
	//表单类型：1、添加 2、查看 3、修改
	var submitType=$('#submitType').val();
	if(submitType==="add"){
		add();
	}else if(submitType==="edit"){
		$.ajax({
			url:'/Final_ssm2/Prisoner/edit',
			dataType:'json',
			type:'post',
			data:{
				id:$('#id').val(),
				priname:$('#priname').val(),
				priage:$('#priage').val(),
				prisex:$('#prisex').val(),
				priaddress:$('#priaddress').val(),
				nation:$('#nation').val(),
				education:$('#education').val(),
				starttime:$('#starttime').val(),
				endtime:$('#endtime').val(),
				partition:$('#partition').val(),
				year:$('#year').val(),
				reason:$('#reason').val(),
				details:$('#details').val(),
			},
			success(res){
				console.log(res);
				if(res.message==="success"){
					alert('修改成功！');
					$('#tb_departments').bootstrapTable('refresh');
					$('#id').val('');
					$('#priname').val('');
					$('#priage').val('');
					$('#prisex').val('');
					$('#priaddress').val('');
					$('#nation').val('');
					$('#education').val('');
					$('#starttime').val('');
					$('#endtime').val('');
					$('#partition').val('');
					$('#year').val('');
					$('#reason').val('');
					$('#details').val('');
				}else if ((res.message==="error")){
	      alert('查看失败！');
	    }else if ((res.message==="error_permission")){
        alert('无权限！');
		}else {
	     alert('未知错误！');
	    }
			},
			error(){
				alert('系统错误');
			}
		})
	}else if(submitType==="look"){
		$('#exampleModal').modal('hide');
	}
}
//模态框监听
$("#exampleModal").on("hide.bs.modal",function(e){
	
	if($(e.target).attr("id") ==="hiredate"){
		return
	}
	if($(e.target).attr("id") ==="starttime"){
		return
	}
	if($(e.target).attr("id") ==="endtime"){
		return
	}
	console.log(e)
	console.log("------");
			$('#priname').val("");
			$('#priage').val("");
			$('#prisex').val("");
			$('#priaddress').val("");
			$('#nation').val("");
			$('#education').val("");
			$('#starttime').val("");
			$('#endtime').val("");
			$('#partition').val("");
			$('#year').val("");
			$('#reason').val("");
			$('#details').val("");
			$('#submitType').attr('value','add');
});

// 查询按钮
$('#queryOther').click(function () {
	$('#tb_departments').bootstrapTable('refresh')
})





			var nation = [
				"汉族", "壮族", "满族", "回族", "苗族", "维吾尔族", "土家族", "彝族", "蒙古族", "藏族", "布依族", "侗族", "瑶族", "朝鲜族", "白族", "哈尼族",
				"哈萨克族", "黎族", "傣族", "畲族", "傈僳族", "仡佬族", "东乡族", "高山族", "拉祜族", "水族", "佤族", "纳西族", "羌族", "土族", "仫佬族", "锡伯族",
				"柯尔克孜族", "达斡尔族", "景颇族", "毛南族", "撒拉族", "布朗族", "塔吉克族", "阿昌族", "普米族", "鄂温克族", "怒族", "京族", "基诺族", "德昂族", "保安族",
				"俄罗斯族", "裕固族", "乌孜别克族", "门巴族", "鄂伦春族", "独龙族", "塔塔尔族", "赫哲族", "珞巴族"
			];
			window.onload = function() {
				//民族
				var nat = document.getElementById("nation");
				for(var i = 0; i < nation.length; i++) {
					var option = document.createElement('option');
					option.value = nation[i];
					var txt = document.createTextNode(nation[i]);
					option.appendChild(txt);
					nat.appendChild(option);
				};
				}
</script>

</body>
</html>